<template>
  <div id="thread-pub">
    <Layout>
      <div id="form-zone">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">帖子</el-breadcrumb-item>
          <el-breadcrumb-item>发布帖子</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form>
          <el-form-item label="帖子标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="选择板块">
            <el-select style="display:block" v-model="optionValue">
              <el-option
                :value="option.value"
                :label="option.lable"
                v-for="option in options"
                :key="option"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input type="textarea" :rows="10" placeholder="Start composing..." class="thread-content"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success">立即发布</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Layout>
  </div>
</template>

<script>
import Layout from "./Layout";
export default {
  components: {
    Layout
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      optionValue: ""
    };
  }
};
</script>

<style lang="scss">
#thread-pub {
  
  #form-zone {
  margin: 20px 10px;
}
}

</style>